<template>
  <div>
    <div>
      <el-card class="box-card">
        <div
          class="title"
          style="color: #333333; font-size: 20px; font-weight: bold"
        >
          条件筛选
        </div>
        <el-form
          label-position="right"
          label-width="100px"
          size="mini"
          :inline="true"
          :model="platformSearch"
          ref="queryForm"
          class="demo-form-inline wrap_inline"
          style="background: #fff"
        >
          <el-form-item label="台区名称:">
            <el-input
              v-model="platformSearch.name"
              placeholder="请输入"
              clearable
              class="input_inner_header"
            ></el-input>
          </el-form-item>
          <el-form-item label="台区编码:">
            <el-input
              v-model="platformSearch.code"
              placeholder="请输入"
              clearable
              class="input_inner_header"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-select
              v-model="platformSearch.platformRegion"
              clearable
              class="input_inner"
              @change="owningRegion"
            >
              <el-option
                v-for="item in serviceTypes"
                :key="item.value"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-left: 90px" type="primary"
              >导出历史负荷</el-button
            >
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset" type="primary">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div style="padding: 0 0px" class="table_wrap">
      <pagetable
        ref="pagetable"
        :data="jgtab"
        :current-page="currentPage"
        :pageSize="pageSize"
        :total="jgtab.length"
        @selection-change="handleSelectionChange"
        @refresh-data="handleRefresh"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          type="index"
          width="50"
          label="序号"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="台区名称"
          prop="zoneName"
          width="120"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="台区编码"
          prop="zoneCode"
          width="120"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="所属区域"
          prop="respectiveRegional"
          width="130"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="是否告警"
          prop="whetherEmergency"
          width="110"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="告警信息"
          prop="emergencyMessage"
          width="110"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="告警开始时间"
          prop="staTime"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="告警结束时间"
          prop="endTime"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="告警持续时间"
          prop="durationTime"
        ></el-table-column>
        <el-table-column label="操作" width="260" fixed="right">
          <template slot-scope="scope">
            <span
              @click="detailrev(scope.$index, scope.row)"
              style="color:#1B9AEE; padding: 0 5px;cursor: pointer;"
              >详情</span
            >
            <span
              style="color:red; padding: 0 5px;cursor: pointer;"
              @click="chargingSet"
              >有序充电设置</span
            >
          </template>
        </el-table-column>
      </pagetable>

      <!-- 台区事件详情 -->
      <el-dialog
        class="dia_power"
        title="台区事件详情"
        :visible.sync="detailShow"
        width="980px"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
      >
        <div
          style="
        box-sizing: border-box;
        padding: 0px 28px;
        position: relative;
        top: -18px;"
        >
          <p class="p_title"><b>丨</b>基本信息</p>
          <div style="display: flex">
            <el-form
              :inline="true"
              :model="xqform"
              label-width="100px"
              size="mini"
              style="flex: 1"
            >
              <el-row type="flex" justify="start" align="middle" class="rowbg2">
                <el-col :span="12">
                  <span class="a_label">组织机构名称：</span>
                  <span class="b_label">{{ xqform.name }}</span>
                </el-col>
                <el-col :span="12">
                  <span class="a_label">组织机构简称：</span>
                  <span class="b_label">{{ xqform.simpleName }}</span>
                </el-col>
              </el-row>

              <el-row type="flex" justify="start" align="middle" class="rowbg">
                <el-col :span="12">
                  <span class="a_label">业务分类：</span
                  >{{ xqform.serviceTypeName }}
                </el-col>
                <el-col :span="12">
                  <span class="a_label">上级组织机构：</span>
                  <span class="b_label">{{ xqform.parentName }}</span>
                </el-col>
              </el-row>

              <el-row type="flex" justify="start" align="middle" class="rowbg2">
                <el-col :span="12">
                  <span class="a_label">联系人：</span>{{ xqform.linkName }}
                </el-col>
                <el-col :span="12">
                  <span class="a_label">联系电话：</span>{{ xqform.linkPhone }}
                </el-col>
              </el-row>

              <el-row type="flex" justify="start" align="middle" class="rowbg">
                <el-col :span="12">
                  <span class="a_label">所属区域：</span>
                  <span class="b_label">{{ xqform.regionId }}</span>
                </el-col>
                <el-col :span="12">
                  <span class="a_label">详细地址：</span>
                  <span class="b_label">{{ xqform.addresDesc }}</span>
                </el-col>
              </el-row>

              <el-row type="flex" justify="start" align="middle" class="rowbg2">
                <el-col :span="12">
                  <span class="a_label">经度：</span>{{ xqform.longitude }}
                </el-col>
                <el-col :span="12">
                  <span class="a_label">纬度：</span>{{ xqform.latitude }}
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div v-if="tableData2.length > 0">
            <p class="p_title"><b>丨</b>数据权限</p>
            <div>
              <div class="ins_site">
                <section style="padding: 0">
                  <el-table
                    :data="tableData2"
                    ref="multipleTable"
                    stripe
                    height="300"
                    style="width: 100%"
                  >
                    <el-table-column label="序号" type="index" width="55">
                    </el-table-column>

                    <el-table-column prop="staName" label="站点名称">
                    </el-table-column>

                    <el-table-column prop="orgName" label="所属组织机构">
                    </el-table-column>

                    <el-table-column prop="typeName" label="站点类型">
                    </el-table-column>

                    <el-table-column prop="engTypeName" label="能源类型">
                    </el-table-column>

                    <el-table-column width="60" label="状态">
                      <template slot-scope="scope">{{
                        scope.row.staType
                      }}</template>
                    </el-table-column>

                    <el-table-column prop="name" label="配变功率">
                    </el-table-column>

                    <el-table-column prop="regName" label="所属区域">
                    </el-table-column>
                  </el-table>
                </section>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        class="ChargingManagementDia"
        width="1580px"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        title="有序充电设置"
        :visible.sync="chargingShow"
      >
        <ChargingManagement></ChargingManagement>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pagetable from "@/components/pagetable";
import addGardenMap from "@/components/map/addGardenMap";
import ChargingManagement from "@/views/carNetworkInteraction/orderlyCharging/orderlyChargingManagement/index.vue";
import { platformEventList } from "@/api/carNetworkInteraction/index.js";
export default {
  data() {
    return {
      chargingShow: false,
      regionId: [],
      jgtab: [],
      detailShow: false,
      table: [],
      xqform: {},
      tableData2: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      serviceTypes: [
        { value: 1, name: "鼓楼区" },
        { value: 2, name: "秦淮区" },
        { value: 3, name: "建邺区" },
        { value: 4, name: "玄武区" },
        { value: 5, name: "雨花台区" },
        { value: 6, name: "浦口区" },
        { value: 7, name: "六合区" },
        { value: 8, name: "江北新区" },
        { value: 9, name: "江宁区" },
        { value: 10, name: "溧水区" },
        { value: 11, name: "高淳区" }
      ],
      regionId: [],
      platformSearch: {
        platformName: "",
        platformCode: "",
        platformRegion: ""
      },
      wwningRegionVal: ""
    };
  },
  components: { pagetable, addGardenMap, ChargingManagement },
  mounted() {
    this.platformEventListData();
  },
  methods: {
    //重置搜索
    reset() {
      platformEventList({
        zoneName: '',
        zoneCode: '',
        respectiveRegional: '',
        pageSize: 10,
        pageNo: 1,
      }).then(res => {
        if (res.code == 200) {
          this.jgtab = res.result.records;
        }
      });
      this.platformSearch= {
        platformName: "",
        platformCode: "",
        platformRegion: ""
      }
      this.$refs["form"].resetFields();
    },
    //搜索
    search() {
      platformEventList({
        zoneName: this.platformSearch.platformName,
        zoneCode: this.platformSearch.platformCode,
        respectiveRegional: this.wwningRegionVal,
        pageSize: this.pageSize,
        pageNo: this.currentPage
      }).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.jgtab = res.result.records;
          // console.log(this.jgtab);
        }
      });
    },
    //搜索-所属区域
    owningRegion(val) {
      console.log(val);
      this.wwningRegionVal = val;
    },
    //台区事件列表
    platformEventListData() {
      platformEventList({
        pageSize: this.pageSize,
        pageNo: this.currentPage
      }).then(res => {
        if (res.code == 200) {
          this.jgtab = res.result.records;
          console.log(this.jgtab);
        }
      });
    },
    handleRefresh() {
      this.currentPage = 1;
      this.showGroupingList();
    },
    handleSelectionChange(val) {},
    //主页面table页码方法
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 分页点击事件
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    chargingSet() {
      this.chargingShow = true;
    },
    // 详情
    detailrev(index, row) {}
  }
};
</script>
<style lang="scss" scoped>
.wrap_inline {
  background: #fff;
  padding: 14px 5px 0px 5px;
}
.box-card {
  margin: 20px;
}
.wrap_inline .input_inner {
  width: 120px;
}
.wrap_inline {
  padding: 0;
}

.top01 {
  margin-left: 57px;
}

.di {
  z-index: 9;
  // position: fixed;
  width: 100%;
  bottom: 0px;
  background: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  line-height: 25px;
  border-top: 1px solid #bcbcbc;
}

.refresh_ {
  border-color: #f3f3f3;
  height: 28px;
  width: 40px;
  margin-left: 10px;
  box-sizing: border-box;
  padding-left: 12px;
}

.table_wrap {
  .table-action-button {
    padding: 4px 8px 3px 8px;
    margin: 5px 1px;
  }

  .red {
    color: #ff4949;
  }

  .el-dialog__footer .el-button {
    margin-right: 40px;
  }

  .el-tabs__item {
    background: #f7f7f7;
  }
}

.text {
  text-align: left;
}

.addForm {
  display: flex;
}

.addBtn {
  display: inline-block;
}

/deep/.el-input__inner {
  width: 130px !important;
}

.el-input--mini {
  width: 150px;
}

.dia_power {
  .a_label {
    display: inline-block;
    width: 120px;
    text-align: right;
    color: #a9a9a9;
  }

  .b_label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.tops01 {
  display: flex;
}

.box-card-left {
  height: 785px;
  width: 100%;
  position: relative;
}

.topSpan01 {
  width: 120px;
  height: 26px;
  font-size: 20px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #ffffff;
  line-height: 35px;
}

.top02 {
  margin-top: 29px;
  height: 74px;
  background: #1b98eb;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  display: flex;
  justify-content: space-between;
}

.topSpan02 {
  width: 50%;
  width: 120px;
  height: 26px;
  font-size: 15px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #ffffff;
  line-height: 28px;
}

.topSpan03 {
  width: 120px;
  height: 26px;
  font-size: 15px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #ffffff;
  line-height: 28px;
}

.box-card_right_top {
  margin: 0 0 20px 20px;
  height: 200px;
}

#capacity {
  height: 30vh;
  width: 100%;
}

.momber {
  margin-top: 10px;
  display: flex;

  li:nth-child(1) {
    margin: 0 5px;
    width: 246px;
    height: 55px;
    background: linear-gradient(360deg, #7276f5 0%, #ec9bff 100%);
    box-shadow: 1px 14px 29px 1px rgba(138, 97, 250, 0.19);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;

    div {
      margin-top: 20px;
    }
  }

  li:nth-child(2) {
    margin: 0 5px;
    width: 246px;
    // height: 99px;
    background: #f4b1e7;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;

    div {
      margin-top: 20px;
    }
  }

  li:nth-child(3) {
    margin: 0 5px;
    width: 246px;
    // height: 99px;
    background: #b1f4bc;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;

    div {
      margin-top: 20px;
    }
  }

  li:nth-child(4) {
    margin: 0 5px;
    width: 246px;
    // height: 99px;
    background: #34c758;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;

    div {
      margin-top: 20px;
    }
  }

  li:nth-child(5) {
    margin: 0 5px;
    width: 246px;
    // height: 99px;
    background: #f4b1e7;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;

    div {
      margin-top: 20px;
    }
  }
}

.bottom03 {
  width: 256px;
  height: 71px;
  border: 1px solid #333333;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  display: flex;
  justify-content: space-between;

  div {
    padding: 5px 10px;
  }
}

.bottom02 {
  display: flex;
  justify-content: space-between;
}

.box-card_right_bottom {
  margin: 0 0 20px 20px;
}

.box-card_right_bottom01 {
  padding: 0;
  margin: 0 0 0 20px;
  height: 195px;
}

.dia_power .tite_icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: #005673;
}

.power_content_per {
  background: #fcfcfc;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
}

.el-row {
}

.el-col {
  display: flex;

  p {
    margin: 3px 0;
  }

  p:nth-child(odd) {
    width: 150px;
    text-align: right;
    color: #a9a9a9;
  }

  p:nth-child(even) {
    flex: 1;
    text-align: left;
  }
}

.rowbg {
  padding: 10px;
  height: 40px;
}

.rowbg2 {
  @extend .rowbg;
  background-color: #f7f7f7;
}

.el-select {
  width: 100%;
}

.el-cascader {
  width: 100%;
}

.power_content {
  background: #fcfcfc;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  overflow: hidden;
  padding: 10px 16px;
  position: relative;
}

.shrink_imgs {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 5;
}

.sh_height {
  height: 38px;
}

.sh_height2 {
  height: 80px;
}

//滚动条样式
*::-webkit-scrollbar {
  width: 7px;
  height: 9px;
  background-color: transparent;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
}

/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #dbdbdb;
  border-radius: 6px;
}

/*定义滑块 内阴影+圆角*/
*::-webkit-scrollbar-thumb:hover {
  background-color: #c2c2c2;
  border-radius: 6px;
}

/*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}

.scrollbarShow::-webkit-scrollbar {
  display: block;
}
</style>
